<!-- echarts水滴 -->
<!--
  使用前除了安装echarts，还需要安装echats-liquidfill，npm install echarts-liquidfill。。
  更多配置项说明百度搜索echats-liquidfill
 -->
<template>
  <div class="echarts-box" id="liquid"></div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-liquidfill"; //引入使用
export default {
  name: "liquidFill",
  data() {
    return {};
  },
  mounted() {
    this.initLiquidCharts();
  },
  methods: {
    initLiquidCharts() {
      let myCharts = echarts.init(document.getElementById("liquid"));
      let options = {
        series: [
          {
            type: "liquidFill", //type修改为liquidFill
            radius: "95%",
            waveAnimation: true, // 波纹动画
            data: [
              {
                value: 0.73,
                diretion: "left",
                itemStyle: {
                  color: "#1890ff",
                },
              },
            ],
            outline: {
              borderDistance: 1, //外部轮廓与图表的距离 数字
              itemStyle: {
                borderWidth: 0,
              },
            },
            itemStyle: {
              opacity: 0.9, //波浪的透明度
              shadowBlur: 0, //波浪的阴影范围
            },
            label: {
              //label样式看需求
              show: true,
              align: "center",
              baseline: "middle",
              position: "inside",
              color: "#fff",
              fontWeight: "normal",
              formatter: function (params) {
                return `{a|${params.value * 100}%}\n{b|完成进度}`;
              },
              rich: {
                a: {
                  fontSize: 36,
                },
                b: {
                  fontSize: 16,
                },
              },
            },
          },
        ],
      };
      myCharts.setOption(options);
      /** 图表随屏幕变化而变化 */
      window.onresize = function () {
        setTimeout(() => {
          myCharts.resize();
        }, 100);
      };
    },
  },
};
</script>

<style>
</style>